<style>
    .i_border {
        border: 1px solid black;
        border-radius: 50%;
        width: 27px;
        height: 27px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>
<style>
    #btn {
        width: 60px;
        height: 60px;
        position: fixed;
        /* //固定定位设置 */
        right: 30px;
        bottom: 30px;
        background-color: rgb(207, 207, 207);
        border-radius: 30px;
        display: none;
        justify-content: center;
        align-items: center;
        color: honeydew;
    }

    .box {
        /* border: solid 1px #C9C9C9; */
        margin: 10px;
    }

    /* 如果list没给高度则给一个默认高度 */
    .iframe-card {
        height: 568px;
    }

    .word-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

    }

    .word {
        /* margin:10px !important; */
        /* border: 1px solid #C9C9C9; */
        background-color: #fff;
        font-size: 12px;
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
        padding: 7px;
        background-color: gray;
        transition: all 0.6s;

    }

    .word:hover {
        transform: scale(1.2);
    }

    .show_component {
        border: 1px solid #C9C9C9;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-top: 10px;
    }

    .btn-card {
        /* background-color: rgba(0, 0, 0, 0.507); */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 10px;
    }

    .btn-card .small {
        margin-right: 5px;
    }

    .avatar {
        width: 27px;
        height: 27px;
        border-radius: 50%;
        margin-bottom: 10px;
    }

    .author-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .author-info .name {
        margin-left: 10px;
        font-size: 14px;
        color: black;
        line-height: 25px;
    }

    .author-info .tag {
        margin-left: 10px;
        color: #aaa;
        font-size: 12px;
        line-height: 22px;
    }

    .author-info button {
        margin-left: auto;
        margin-right: 10px;
    }

    .bar {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .xx-waterflow {
        width: 100%;
        position: relative;
        height: auto !important;
        overflow: auto !important;
    }
</style>

<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/render_somthing.js"></script>

<script>
    var function_button;
    // 如果是组件生成器
    if (location.href.indexOf("component_creator.html") > -1) {
        function_button = `
<i title="重命名" data-key="rename_component" style="margin-left:auto;font-size: 18px;padding-left: 2px;padding-top: 2px;" class="i_border layui-icon layui-icon-survey"></i>
<i title="编辑" data-key="edit_component" style="margin-left:10px;font-size: 20px;" class="i_border layui-icon layui-icon-edit"></i>
<i title="删除" data-key="delete_component" style="font-size: 20px;margin-left:10px;" class=" i_border layui-icon layui-icon-delete"></i>
<i title="刷新" data-key="reload_component" style="margin-left:10px;font-size: 18px;" class="i_border layui-icon layui-icon-refresh"></i>
<i title="添加" data-key="use_component" style="margin-left:10px;font-size: 30px;width:40px;height:40px;margin-right:10px;" class="i_border layui-icon layui-icon-ok"></i>
`;
    }
    // 不是组件生成器（隐藏其它按钮）
    else {
        function_button = `
<i title="添加" data-key="use_component" style="margin-left:10px;font-size: 30px;width:40px;height:40px;margin-right:10px;" class="i_border layui-icon layui-icon-ok"></i>        
`;
    }

    {
        var render_somthing_component_list;
        render_somthing_component_list = new render_somthing();
        render_somthing_component_list.init({
            // div的id
            id: "#component_list",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div class="word-card"></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div data-key="type_click" class="word" style="background-color: #{bgcolor};">#{desc}</div>
`,
            },
            field_function: [{
                field: "create_time",
                type: "format_datetime",
                format: "to-now",
            }, ],
            callback: {
                click: function (res) {
                    if (res.key == "type_click") {
                        //渲染列表
                        window['desc'] = res.value.desc;
                        render_somthing_component_type_list.render(madeComponent(res.value.desc));
                        that.water_fall();
                        //滑动
                        getDivHeight('#component_list');
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [],
        })
        var data = [];
        var that = this;
        data['data'] = [{
            key: 'loading'
        }, {
            key: 'slide'
        }, {
            key: 'tabbar'
        }, {
            key: '下拉'
        }, {
            key: '九宫格'
        }, {
            key: '位置'
        }, {
            key: '倒计时'
        }, {
            key: '内容'
        }, {
            key: '动画'
        }, {
            key: '单选'
        }, {
            key: '取色器'
        }, {
            key: '地图'
        }, {
            key: '图表'
        }, {
            key: '多选'
        }, {
            key: '布局'
        }, {
            key: '弹幕'
        }, {
            key: '弹窗'
        }, {
            key: '折叠'
        }, {
            key: '抽奖'
        }, {
            key: '抽屉'
        }, {
            key: '拖拽'
        }, {
            key: '排序'
        }, {
            key: '日期段'
        }, {
            key: '时间'
        }, {
            key: '时间段'
        }, {
            key: '朋友圈'
        }, {
            key: '树形'
        }, {
            key: '横向'
        }, {
            key: '步骤'
        }, {
            key: '滑动'
        }, {
            key: '滑块'
        }, {
            key: '瀑布流'
        }, {
            key: '点赞'
        }, {
            key: '电商'
        }, {
            key: '画廊'
        }, {
            key: '编辑器'
        }, {
            key: '翻转'
        }, {
            key: '翻页'
        }, {
            key: '聊天'
        }, {
            key: '菜单'
        }, {
            key: '视频'
        }, {
            key: '订阅'
        }, {
            key: '评分'
        }, {
            key: '评级'
        }, {
            key: '评论'
        }, {
            key: '询问'
        }];
        //预处理数据
        var component_name = [];
        data.data.forEach(element => {
            component_name.push({
                desc: element.key,
                bgcolor: get_random_color()
            });
        });

        render_somthing_component_list.render(component_name);

        //获取循环三原色
        function get_random_color() {
            var google_blue = '#2d85f0';
            var google_red = '#f4433c';
            var google_yellow = '#ffbc32';
            var google_green = '#0aa858';
            if (window.flag == undefined || window.flag == 3) {
                window.flag = -1;
            }
            window.flag = window.flag + 1;
            switch (window.flag) {
                case 0:
                    return google_blue;
                    break;
                case 1:
                    return google_red;
                    break;
                case 2:
                    return google_yellow;
                    break;
                case 3:
                    return google_green;
                    break;
                default:
                    return google_blue;
                    break;
            }
        }

        var render_somthing_component_type_list;
        render_somthing_component_type_list = new render_somthing();
        render_somthing_component_type_list.init({
            // div的id
            id: "#component_type_list2",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div ></div>
    `
            },
            //<div>#{create_time}</div>
            // 渲染内容的配置
            content: {
                default: `
<div class="show_component" style="margin-left:10px;margin-right:10px;width:320px;">
    <div class="author-info">
                <div style="margin-top: 10px;width:100%;margin-bottom:10px;">
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;">
                        <div >
                        <div class="name">#{desc}</div>
                        <div class="tag">#{vendor}</div>
                        </div>
                        <div style="margin-left:auto;" class="tag">#{weight}</div>
                        <img  style="margin-left:10px;margin-right:10px;" class="avatar" src="#{headimgurl}">
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;height: 40px;align-items: center;">
                            <div class="tag">#{create_time}</div>
${function_button}
                    </div>
                </div>
            </div>
    <iframe id="#{component_id}" class="iframe-card" style="height: #{height}px;" src="https://res.dcdev.net/component/#{component_id}.html"></iframe>
</div>
`,
            },
            field_function: [{
                field: "create_time",
                type: "format_datetime",
                format: "to-now",
            }, ],
            callback: {
                click: function (res) {
                    var component_data = res;
                    var data = component_data;
                    if (res.key == "use_component") {
                        //如果是album，点击后直接跳转编辑页面
                        if (location.href.indexOf("component_album.html") > -1) {
                            window.open('component_creator.html?id='+component_data.value.component_id);
                            return;
                        }
                        //如果是album，点击后直接跳转编辑页面
                        ui_class.show_confirm(`确定要添加该组件？`, null,
                            function (res) {
                                if (res.res) {
                                    var data = component_data;
                                    debugger;
                                    // 为组件添加调用计数器
                                    var _url =
                                        "https://api.dcdev.net/v1.0.1/component/weight_component.php";
                                    var _data = {
                                        "component_id": component_data.value.component_id,
                                        "uid": user_info.uid,
                                        "pid": project_info.pid
                                    };
                                    $.ajax({
                                        method: "post",
                                        dataType: "json",
                                        url: _url,
                                        data: {
                                            params: JSON.stringify(_data)
                                        },
                                        success: function (res) {}
                                    })
                                    if ($('#' + data.value.vendor).css("background-color") !=
                                        "rgb(194, 194, 194)") {
                                        //已选
                                    } else {
                                        //选择
                                        $('#' + data.value.vendor).css("background-color", "#5FB878");
                                        selected_framework.push(data.value.vendor)
                                        madeImport(selected_framework)
                                    }
                                    $.get(`https://res.dcdev.net/component/${data.value.component_id}.html`,
                                        function (
                                            html) {
                                            console.log(html)
                                            var id = Date.parse(new Date());
                                            //组件添加时，添加前后注释
                                            var head =
                                                `<!-- ${data.value.vendor} / ${data.value.desc},id:${id} start-->\n`
                                            var bottom =
                                                `\n<!-- ${data.value.vendor} / ${data.value.desc},id:${id} end-->`
                                            html_no_enter = html = html.replace(/^\s+|\s+$/g, '');
                                            html_temp = head + html_no_enter + bottom;
                                            //统一判断除重
                                            html_temp = cleanRepeatScriptAndLinkSrc(html_temp,
                                                editor.getValue())

                                            insert_to_editor(html_temp + '\n\n');
                                            //$('#jqueryui').click();
                                        })
                                }
                            })
                    }
                    if (res.key == 'edit_component') {
                        ui_class.show_confirm(`确定要修改该组件？`, null,
                            function (res) {
                                if (res.res) {
                                    window.open(
                                        `https://res.dcdev.net/dcdev/v1.0.8/func/component_creator/component_creator.html?id=${data.value.component_id}`
                                    );
                                }
                            })
                    }
                    if (res.key == 'rename_component') {
                        var component_desc = res.value.desc;
                        var component_id = res.value.component_id;
                        ui_class.show_inputor({
                            type: "char",
                            title: "重命名组件",
                            text: component_desc,
                            opacity: 0.2,
                            min_value: 4,
                            max_value: 20,
                        }, function (res) {
                            $(`#page_name`).val(res.text);
                            var url =
                                "https://api.dcdev.net/v1.0.1/component/update_component.php";
                            var data = {
                                "component_id": component_id,
                                "vendor": selected_framework.join(","),
                                "desc": $(`#page_name`).val() ? $(`#page_name`)
                                    .val() : "",
                            }
                            $.ajax({
                                method: "post",
                                dataType: "json",
                                url: url,
                                data: {
                                    params: JSON.stringify(data)
                                },
                                success: function (res) {
                                    if (res.res) {
                                        ui_class.show_success("更名成功.");
                                    } else {
                                        ui_class.show_error(res.desc);
                                    }
                                }
                            })
                        })
                    }
                    if (res.key == 'reload_component') {
                        $(`#${data.value.component_id}`).attr('src', $(`#${data.value.component_id}`).attr(
                            'src'));
                    }
                    if (res.key == 'delete_component') {
                        ui_class.show_confirm(`确定要删除该组件？`, null,
                            function (res) {
                                if (res.res) {
                                    var url =
                                        "https://api.dcdev.net/v1.0.1/component/delete_component.php";
                                    var _data = {
                                        "component_id": data.value.component_id,
                                    }
                                    $.ajax({
                                        method: "post",
                                        dataType: "json",
                                        url: url,
                                        data: {
                                            params: JSON.stringify(_data)
                                        },
                                        success: function (res) {
                                            render_somthing_component_type_list.render(
                                                madeComponent(window['desc']));
                                        }
                                    })
                                }
                            })
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [],
        })


        //制作对应的组件的数组
        function madeComponent(name) {
            var data = [];
            var that = this;
            // component_index.forEach(element => {
            //     if (element.desc == name) {
            //         data.push(element);
            //     }
            // })
            $.ajax({
                type: "post",
                url: "https://api.dcdev.net/v1.0.1/component/get_component_by_participle.php",
                data: {
                    params: JSON.stringify({
                        "participle": name
                    })
                },
                async: false,
                success: function (res) {
                    that.data = JSON.parse(res);
                }
            });
            return that.data.data;
        }
        //实时获取按钮div高度并滑动
        function getDivHeight(name) {
            var height = $(name).outerHeight(true);
            $('html , body').animate({
                scrollTop: height
            }, 'slow');
        }
    }
</script>


<script>
    function render_iframe() {
        render_iframe.prototype.srcdoc = function (iframe, url) {
            $.ajax({
                url: url, //json文件位置
                type: "get", //请求方式为get
                success: function (res) {
                    var html = `
    <html>
    <head>
        <meta charset="UTF-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
            html {
                height: 100%;
            }
        
            body {
                overflow: hidden;
                height: 100%;
            }
        <\/style>
    <\/head>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"><\/script>
    <body>
    ${res} 
    <\/body>
    <\/html>
    `
                    //$(iframe).attr("srcdoc", html);
                    var iframeHtml = $(iframe).get(0);
                    iframeHtml.contentWindow.document.body.innerHTML = "";
                    iframeHtml.contentWindow.document.write(html); // 动态写入返回页面到iframe
                    iframeHtml.contentWindow.document.close();
                }
            })
        }
    }

    function component_list_all() {
        // 获取组件列表
    $("#component_type_list").load("https://res.dcdev.net/dcdev/v1.0.8/assets/html/render_somthing.html",
        "",
        function () {
            data = {
                id: "component_type_list",
                // x表示横向滚动、y表示竖向滚动、block表示块状向下滚动
                direction: "y",
                search_config: {
                    enable: true,
                    query_fields: "keyword",
                },
                // 每个ul的配置
                ul_config: {
                    ul_class: "",
                    ul_style: "",
                },
                // 每个li的配置
                li_config: {
                    li_class: "",
                    li_style: "",
                    li_html: {
                        // 如果不设置条件渲染，则使用默认的html代码渲染
                        default: {
                            html: `
<div class="show_component" style="margin-left:10px;margin-right:10px;width:320px;">
            <div class="author-info">
                <div style="margin-top: 10px;width:100%;margin-bottom:10px;">
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;">
                        <div >
                        <div class="name">#{desc}</div>
                        <div class="tag">#{vendor}</div>
                        </div>
                        <div style="margin-left:auto;" class="tag">#{weight}</div>
                        <img  style="margin-left:10px;margin-right:10px;" class="avatar" src="#{headimgurl}">
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;height: 40px;align-items: center;">
                            <div class="tag">#{create_time}</div>
${function_button}
                    </div>
                </div>
            </div>
    <iframe id="#{component_id}" class="iframe-card" style="height: #{height}px;" ></iframe>
</div>
`
                        },

                    },

                    // td 的函数配置
                    li_function: [{
                        field: "create_time",
                        type: "format_datetime",
                        format: "to-now",
                    }, ],
                },
                // 各种类型的回调
                cb_config: {
                    // 点击的回调
                    click: function (res) {
                        var data = res;
                        if (res.li_key == "use_component") {
                            //如果是album，点击后直接跳转编辑页面
                            if (location.href.indexOf("component_album.html") > -1) {
                                window.open('component_creator.html?id='+data.ul_value.component_id);
                                return;
                            }
                            //如果是album，点击后直接跳转编辑页面
                            ui_class.show_confirm(`确定要添加该组件？`, null,
                                function (res) {
                                    if (res.res) {
                                        // 为组件添加调用计数器
                                        var _url =
                                            "https://api.dcdev.net/v1.0.1/component/weight_component.php";
                                        var _data = {
                                            "component_id": data.ul_value.component_id,
                                            "uid": user_info.uid,
                                            "pid": project_info.pid
                                        };
                                        $.ajax({
                                            method: "post",
                                            dataType: "json",
                                            url: _url,
                                            data: {
                                                params: JSON.stringify(_data)
                                            },
                                            success: function (res) {}
                                        })
                                        if ($('#' + data.ul_value.vendor).css("background-color") !=
                                            "rgb(194, 194, 194)") {
                                            //已选
                                        } else {
                                            //选择
                                            $('#' + data.ul_value.vendor).css("background-color",
                                                "#5FB878");
                                            selected_framework.push(data.ul_value.vendor)
                                            // madeImport(selected_framework)
                                        }
                                        $.get(`https://res.dcdev.net/component/${data.ul_value.component_id}.html`,
                                            function (
                                                html) {
                                                var id = Date.parse(new Date());
                                                //组件添加时，添加前后注释
                                                var head =
                                                    `<!-- ${data.ul_value.vendor} / ${data.ul_value.desc},id:${id} start-->\n`
                                                var bottom =
                                                    `\n<!-- ${data.ul_value.vendor} / ${data.ul_value.desc},id:${id} end-->`
                                                html_temp = head + html + bottom;
                                                //统一判断除重
                                                html_temp = cleanRepeatScriptAndLinkSrc(html_temp,
                                                    editor.getValue())
                                                insert_to_editor(html_temp + '\n\n');
                                            })
                                    }
                                })
                        }
                        if (res.li_key == 'reload_component') {
                            $(`#${data.ul_value.component_id}`).attr('src', $(
                                `#${data.ul_value.component_id}`).attr('src'));
                        }
                        if (res.li_key == 'edit_component') {
                            ui_class.show_confirm(`确定要修改该组件？`, null,
                                function (res) {
                                    if (res.res) {
                                        window.open(
                                            `https://res.dcdev.net/dcdev/v1.0.8/func/component_creator/component_creator.html?id=${data.ul_value.component_id}`
                                        );
                                    }
                                })
                        }
                        if (res.li_key == 'delete_component') {
                            ui_class.show_confirm(`确定要删除该组件？`, null,
                                function (res) {
                                    if (res.res) {
                                        var url =
                                            "https://api.dcdev.net/v1.0.1/component/delete_component.php";
                                        var _data = {
                                            "component_id": data.ul_value.component_id,
                                        }
                                        $.ajax({
                                            method: "post",
                                            dataType: "json",
                                            url: url,
                                            data: {
                                                params: JSON.stringify(_data)
                                            },
                                            success: function (res) {
                                                render_somthing_component_type_list.render(
                                                    madeComponent(window['desc']));
                                            }
                                        })
                                    }
                                })
                        }
                        if (res.li_key == 'rename_component') {
                            var component_desc = data.ul_value.desc;
                            var component_id = data.ul_value.component_id;
                            ui_class.show_inputor({
                                type: "char",
                                title: "重命名组件",
                                text: component_desc,
                                opacity: 0.2,
                                min_value: 4,
                                max_value: 20,
                            }, function (res) {
                                $(`#page_name`).val(res.text);
                                var url =
                                    "https://api.dcdev.net/v1.0.1/component/update_component.php";
                                var data = {
                                    "component_id": component_id,
                                    "vendor": selected_framework.join(","),
                                    "desc": $(`#page_name`).val() ? $(`#page_name`)
                                        .val() : "",
                                }
                                $.ajax({
                                    method: "post",
                                    dataType: "json",
                                    url: url,
                                    data: {
                                        params: JSON.stringify(data)
                                    },
                                    success: function (res) {
                                        if (res.res) {
                                            ui_class.show_success("更名成功.");
                                        } else {
                                            ui_class.show_error(res.desc);
                                        }
                                    }
                                })
                            })
                        }
                    },
                    // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                    data_fetched: function (res) {},
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    before_render: function (res) {},
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    after_render: function (res) {
                        //瀑布流
                        // try {
                        //     $('.component_type_list2_container').jaliswall({ item: '.show_component' });
                        // } catch (error) {
                        //     console.log('当前页面不支持瀑布流显示。component_type_list2_container')
                        // }
                        
                        // 请求返回的数据
                        var data = res.object.data_fetched.page_data;
                        // 获取所有iframe
                        var array = $(`#_dc_component_type_list_ul_`).children();
                        var component_id;
                        var url;
                        var iframe;
                        // 加载iframe内容
                        for (let index = 0; index < array.length; index++) {
                            const element = array[index];
                            iframe = $($($(`#_dc_component_type_list_ul_`).children()[index])
                                    .children()[0])
                                .children()[1];
                            component_id = data[index]["component_id"];
                            url = `https://res.dcdev.net/component/${component_id}.html`;
                            // // 写入url内容到iframe
                            new render_iframe().srcdoc(iframe, url);
                        }
                    },
                    // 所有数据加载完毕的回调
                    no_more: function (res) {},
                },
                // 请求及分页的配置
                data_config: {
                    require: {
                        url: `https://api.dcdev.net/v1.0.1/component/select_component.php`,
                        data: {
                            __PAGE_NUMBER: 1,
                            __PAGE_COUNT: 5,
                            __QUERY_COLUMNS: "",
                            __ORDER: [],
                        },
                        method: "post",
                        dataType: "json",
                        require_data_param: "data",
                        page_number_param: "__PAGE_NUMBER",
                        page_count_param: "__PAGE_COUNT",
                        data_count_param: "__COUNT",
                        search_keyword_param: "keyword",
                        pagination: {
                            enable: true,
                        }
                    },
                },
            };
            new render_class().render(data, null, null)
        });
    }




    var component_project_list;
    component_project_list = new render_somthing();
    component_project_list.init({
        // div的id
        id: "#component_project_list",
        // x/y/flow   分别为x向滚动、y向滚动、瀑布流
        method: "x",
        // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
        container: {
            html: `
                <div ></div>
    `
        },
        //<div>#{create_time}</div>
        // 渲染内容的配置
        content: {
            default: `
<div class="show_component" style="margin-left:10px;margin-right:10px;width:320px;">
    <div class="author-info">
                <div style="margin-top: 10px;width:100%;margin-bottom:10px;">
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;">
                        <div >
                        <div class="name">#{desc}</div>
                        <div class="tag">#{vendor}</div>
                        </div>
                        <div style="margin-left:auto;" class="tag">#{weight}</div>
                        <img  style="margin-left:10px;margin-right:10px;" class="avatar" src="#{headimgurl}">
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;height: 40px;align-items: center;">
                            <div class="tag">#{create_time}</div>
${function_button}
                    </div>
                </div>
            </div>
    <iframe id="#{component_id}" class="iframe-card" style="height: #{height}px;" src="https://res.dcdev.net/component/#{component_id}.html"></iframe>
</div>
`,
        },
        field_function: [{
            field: "create_time",
            type: "format_datetime",
            format: "to-now",
        }, ],
        callback: {
            click: function (res) {
                var component_data = res;
                var data = component_data;
                if (res.key == "use_component") {
                    ui_class.show_confirm(`确定要添加该组件？`, null,
                        function (res) {
                            if (res.res) {
                                var data = component_data;
                                debugger;
                                // 为组件添加调用计数器
                                var _url =
                                    "https://api.dcdev.net/v1.0.1/component/weight_component.php";
                                var _data = {
                                    "component_id": component_data.value.component_id,
                                    "uid": user_info.uid,
                                    "pid": project_info.pid
                                };
                                $.ajax({
                                    method: "post",
                                    dataType: "json",
                                    url: _url,
                                    data: {
                                        params: JSON.stringify(_data)
                                    },
                                    success: function (res) {}
                                })
                                if ($('#' + data.value.vendor).css("background-color") !=
                                    "rgb(194, 194, 194)") {
                                    //已选
                                } else {
                                    //选择
                                    $('#' + data.value.vendor).css("background-color", "#5FB878");
                                    selected_framework.push(data.value.vendor)
                                    madeImport(selected_framework)
                                }
                                $.get(`https://res.dcdev.net/component/${data.value.component_id}.html`,
                                    function (
                                        html) {
                                        console.log(html)
                                        var id = Date.parse(new Date());
                                        //组件添加时，添加前后注释
                                        var head =
                                            `<!-- ${data.value.vendor} / ${data.value.desc},id:${id} start-->\n`
                                        var bottom =
                                            `\n<!-- ${data.value.vendor} / ${data.value.desc},id:${id} end-->`
                                        html_no_enter = html = html.replace(/^\s+|\s+$/g, '');
                                        html_temp = head + html_no_enter + bottom;
                                        //统一判断除重
                                        html_temp = cleanRepeatScriptAndLinkSrc(html_temp,
                                            editor.getValue())

                                        insert_to_editor(html_temp + '\n\n');
                                        //$('#jqueryui').click();
                                    })
                            }
                        })
                }
                if (res.key == 'edit_component') {
                    ui_class.show_confirm(`确定要修改该组件？`, null,
                        function (res) {
                            if (res.res) {
                                window.open(
                                    `https://res.dcdev.net/dcdev/v1.0.8/func/component_creator/component_creator.html?id=${data.value.component_id}`
                                );
                            }
                        })
                }
                if (res.key == 'rename_component') {
                    var component_desc = res.value.desc;
                    var component_id = res.value.component_id;
                    ui_class.show_inputor({
                        type: "char",
                        title: "重命名组件",
                        text: component_desc,
                        opacity: 0.2,
                        min_value: 4,
                        max_value: 20,
                    }, function (res) {
                        $(`#page_name`).val(res.text);
                        var url =
                            "https://api.dcdev.net/v1.0.1/component/update_component.php";
                        var data = {
                            "component_id": component_id,
                            "vendor": selected_framework.join(","),
                            "desc": $(`#page_name`).val() ? $(`#page_name`)
                                .val() : "",
                        }
                        $.ajax({
                            method: "post",
                            dataType: "json",
                            url: url,
                            data: {
                                params: JSON.stringify(data)
                            },
                            success: function (res) {
                                if (res.res) {
                                    ui_class.show_success("更名成功.");
                                } else {
                                    ui_class.show_error(res.desc);
                                }
                            }
                        })
                    })
                }
                if (res.key == 'reload_component') {
                    $(`#${data.value.component_id}`).attr('src', $(`#${data.value.component_id}`).attr(
                        'src'));
                }
                if (res.key == 'delete_component') {
                    ui_class.show_confirm(`确定要删除该组件？`, null,
                        function (res) {
                            if (res.res) {
                                var url =
                                    "https://api.dcdev.net/v1.0.1/component/delete_component.php";
                                var _data = {
                                    "component_id": data.value.component_id,
                                }
                                $.ajax({
                                    method: "post",
                                    dataType: "json",
                                    url: url,
                                    data: {
                                        params: JSON.stringify(_data)
                                    },
                                    success: function (res) {
                                        render_somthing_component_type_list.render(
                                            madeComponent(window['desc']));
                                    }
                                })
                            }
                        })
                }
            }
        },
        // 条件渲染内容
        /*
            ^{ROW_INDEX} - 常量，表示数据数组的下标
            #{title}     - 变量，表示数据数组中对象的key
        */
        condition: [],
    })
    //制作对应的组件的数组
    function made_component_project_list() {
        var data = {
            data: []
        };
        var that = this;
        debugger;
        $.ajax({
            type: "post",
            url: "https://api.dcdev.net/v1.0.1/component/get_component_project.php",
            data: {
                params: JSON.stringify({
                    "pid": project_info.pid
                })
            },
            async: false,
            success: function (res) {
                component_project_list.render(JSON.parse(res).data);
            }
        });
        return data.data;
    }
    
    //component_project_list.render([{},{}]);
    var component_project_by_uid;
    component_project_by_uid = new render_somthing();
    component_project_by_uid.init({
        // div的id
        id: "#component_project_by_uid",
        // x/y/flow   分别为x向滚动、y向滚动、瀑布流
        method: "x",
        // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
        container: {
            html: `
                <div ></div>
    `
        },
        //<div>#{create_time}</div>
        // 渲染内容的配置
        content: {
            default: `
<div class="show_component" style="margin-left:10px;margin-right:10px;width:320px;">
    <div class="author-info">
                <div style="margin-top: 10px;width:100%;margin-bottom:10px;">
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;">
                        <div >
                        <div class="name">#{desc}</div>
                        <div class="tag">#{vendor}</div>
                        </div>
                        <div style="margin-left:auto;" class="tag">#{weight}</div>
                        <img  style="margin-left:10px;margin-right:10px;" class="avatar" src="#{headimgurl}">
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;height: 40px;align-items: center;">
                            <div class="tag">#{create_time}</div>
${function_button}
                    </div>
                </div>
            </div>
    <iframe id="#{component_id}" class="iframe-card" style="height: #{height}px;" src="https://res.dcdev.net/component/#{component_id}.html"></iframe>
</div>
`,
        },
        field_function: [{
            field: "create_time",
            type: "format_datetime",
            format: "to-now",
        }, ],
        callback: {
            click: function (res) {
                var component_data = res;
                var data = component_data;
                if (res.key == "use_component") {
                    ui_class.show_confirm(`确定要添加该组件？`, null,
                        function (res) {
                            if (res.res) {
                                var data = component_data;
                                debugger;
                                // 为组件添加调用计数器
                                var _url =
                                    "https://api.dcdev.net/v1.0.1/component/weight_component.php";
                                var _data = {
                                    "component_id": component_data.value.component_id,
                                    "uid": user_info.uid,
                                    "pid": project_info.pid
                                };
                                $.ajax({
                                    method: "post",
                                    dataType: "json",
                                    url: _url,
                                    data: {
                                        params: JSON.stringify(_data)
                                    },
                                    success: function (res) {}
                                })
                                if ($('#' + data.value.vendor).css("background-color") !=
                                    "rgb(194, 194, 194)") {
                                    //已选
                                } else {
                                    //选择
                                    $('#' + data.value.vendor).css("background-color", "#5FB878");
                                    selected_framework.push(data.value.vendor)
                                    madeImport(selected_framework)
                                }
                                $.get(`https://res.dcdev.net/component/${data.value.component_id}.html`,
                                    function (
                                        html) {
                                        console.log(html)
                                        var id = Date.parse(new Date());
                                        //组件添加时，添加前后注释
                                        var head =
                                            `<!-- ${data.value.vendor} / ${data.value.desc},id:${id} start-->\n`
                                        var bottom =
                                            `\n<!-- ${data.value.vendor} / ${data.value.desc},id:${id} end-->`
                                        html_no_enter = html = html.replace(/^\s+|\s+$/g, '');
                                        html_temp = head + html_no_enter + bottom;
                                        //统一判断除重
                                        html_temp = cleanRepeatScriptAndLinkSrc(html_temp,
                                            editor.getValue())

                                        insert_to_editor(html_temp + '\n\n');
                                        //$('#jqueryui').click();
                                    })
                            }
                        })
                }
                if (res.key == 'edit_component') {
                    ui_class.show_confirm(`确定要修改该组件？`, null,
                        function (res) {
                            if (res.res) {
                                window.open(
                                    `https://res.dcdev.net/dcdev/v1.0.8/func/component_creator/component_creator.html?id=${data.value.component_id}`
                                );
                            }
                        })
                }
                if (res.key == 'rename_component') {
                    var component_desc = res.value.desc;
                    var component_id = res.value.component_id;
                    ui_class.show_inputor({
                        type: "char",
                        title: "重命名组件",
                        text: component_desc,
                        opacity: 0.2,
                        min_value: 4,
                        max_value: 20,
                    }, function (res) {
                        $(`#page_name`).val(res.text);
                        var url =
                            "https://api.dcdev.net/v1.0.1/component/update_component.php";
                        var data = {
                            "component_id": component_id,
                            "vendor": selected_framework.join(","),
                            "desc": $(`#page_name`).val() ? $(`#page_name`)
                                .val() : "",
                        }
                        $.ajax({
                            method: "post",
                            dataType: "json",
                            url: url,
                            data: {
                                params: JSON.stringify(data)
                            },
                            success: function (res) {
                                if (res.res) {
                                    ui_class.show_success("更名成功.");
                                } else {
                                    ui_class.show_error(res.desc);
                                }
                            }
                        })
                    })
                }
                if (res.key == 'reload_component') {
                    $(`#${data.value.component_id}`).attr('src', $(`#${data.value.component_id}`).attr(
                        'src'));
                }
                if (res.key == 'delete_component') {
                    ui_class.show_confirm(`确定要删除该组件？`, null,
                        function (res) {
                            if (res.res) {
                                var url =
                                    "https://api.dcdev.net/v1.0.1/component/delete_component.php";
                                var _data = {
                                    "component_id": data.value.component_id,
                                }
                                $.ajax({
                                    method: "post",
                                    dataType: "json",
                                    url: url,
                                    data: {
                                        params: JSON.stringify(_data)
                                    },
                                    success: function (res) {
                                        render_somthing_component_type_list.render(
                                            madeComponent(window['desc']));
                                    }
                                })
                            }
                        })
                }
            }
        },
        // 条件渲染内容
        /*
            ^{ROW_INDEX} - 常量，表示数据数组的下标
            #{title}     - 变量，表示数据数组中对象的key
        */
        condition: [],
    })
    //制作对应的组件的数组
    function made_component_project_by_uid() {
        var data = {
            data: []
        };
        var that = this;
        debugger;
        $.ajax({
            type: "post",
            url: "https://api.dcdev.net/v1.0.1/component/get_component_project_by_uid.php",
            data: {
                params: JSON.stringify({
                    "uid":user_info.uid
                })
            },
            async: false,
            success: function (res) {
                component_project_by_uid.render(JSON.parse(res).data);
            }
        });
        return data.data;
    }
    
    //component_project_by_uid.render([{},{}]);
</script>